<template>
  <!-- 商品底部 -->
  <div class="GoodsFooter">
    <!-- 商品详细信息 -->
    <div class="goods_article">
      <!-- tab栏切换 -->
      <div class="goods_tabs">
        <!-- 切换 -->
        <nav>
          <div :class="{ active: tabCurrentIndex == 0 }" @click="tabChange(0)">
            商品详情
          </div>
          <div :class="{ active: tabCurrentIndex == 1 }" @click="tabChange(1)">
            商品评价<span>(1)</span>
          </div>
        </nav>
        <!-- 商品的规格 -->
        <div class="goods_detail" v-if="tabCurrentIndex == 0">
          <ul class="attrs">
            <li v-for="item in details.properties" :key="item.name">
              <span class="dl">{{ item.name }}</span>
              <span class="dd">{{ item.value }}</span>
            </li>
          </ul>
          <img
            v-for="(item, index) in details.pictures"
            v-lazyload="item"
            alt=""
            :key="index"
          />
        </div>
        <!-- 商品评价 -->
        <div v-else class="goods_comment">
          <!-- 头部 -->
          <div class="head">
            <div class="data">
              <p>
                <span>{{ evaluateData.salesCount }}</span>
                <span>人购买</span>
              </p>
              <p>
                <span>{{ evaluateData.praisePercent }}</span>
                <span>好评率</span>
              </p>
            </div>
            <div class="tags">
              <div class="dl">大家都在说：</div>
              <div class="dd">
                <p
                  @click="evaluateTag(-2, '')"
                  :class="{ active: evaluateCurrentIndex == -2 }"
                >
                  全部评价({{ evaluateData.evaluateCount }})
                </p>
                <p
                  @click="evaluateTag(-1, '')"
                  :class="{ active: evaluateCurrentIndex == -1 }"
                >
                  有图({{ evaluateData.hasPictureCount }})
                </p>
                <p
                  @click="evaluateTag(index, item.title)"
                  v-for="(item, index) in evaluateData.tags"
                  :key="item.title"
                  :class="{ active: evaluateCurrentIndex == index }"
                >
                  <span>{{ item.title }}</span
                  ><span>({{ item.tagCount }})</span>
                </p>
              </div>
            </div>
          </div>
          <!-- 排序 -->
          <div class="sort">
            <span>排序：</span>
            <p
              v-for="(item, index) in srotData"
              :key="index"
              :class="{ active: sortCurrentIndex == index }"
              @click="sortHandle(index)"
            >
              {{ item }}
            </p>
          </div>
          <!-- 展示用户评价 -->
          <div class="list">
            <div
              class="item"
              v-for="(item, index) in userCommentsData"
              :key="index"
            >
              <div class="user">
                <img v-lazyload="item.member.avatar" alt="" />
                <span>{{ item.member.nickname }}</span>
              </div>
              <div class="body">
                <div class="score">
                  <i
                    class="iconfont icon-star-full"
                    v-for="item in item.score"
                    :key="item"
                  ></i>
                  <i
                    class="iconfont icon-star"
                    v-for="item in 5 - item.score"
                    :key="item"
                  ></i>
                  <span class="attr">
                    <small
                      v-for="attr in item.orderInfo.specs"
                      :key="attr.name"
                    >
                      {{ attr.name }}：{{ attr.nameValue }}&nbsp;</small
                    >
                  </span>
                </div>
                <div class="text">
                  {{ item.content }}
                </div>
                <!-- 用户的照片 -->
                <div
                  class="goods_comment_image"
                  v-if="item.pictures.length > 0"
                >
                  <img
                    v-for="(img, imgIndex) in item.pictures"
                    :key="imgIndex"
                    v-lazyload="img"
                    @click="bigImageChange(img, index)"
                    alt=""
                  />
                </div>
                <div
                  class="bigImage"
                  v-if="
                    bigImage &&
                    item.pictures.length > 0 &&
                    bigImageIndex == index
                  "
                >
                  <img :src="bigImage" alt="" />
                  <i class="iconfont icon-guanbi2" @click="bigImage = null"></i>
                </div>
                <!-- 用户发表的时间 -->
                <div class="time">
                  <span class="time">{{ item.createTime }}</span>
                  <span class="zan"
                    ><i class="iconfont icon-zans">{{
                      item.praiseCount
                    }}</i></span
                  >
                </div>
              </div>
            </div>
          </div>
          <!-- 分页 -->
          <my-paginate
            v-model="page"
            :pages="pages"
            @currentPageChange="currentPageChange"
          ></my-paginate>
        </div>
      </div>
      <!-- 注意事项 -->
      <div class="goods_warn">
        <h3>注意事项</h3>
        <p class="tlt">• 购买运费如何收取？</p>
        <p>
          单笔订单金额(不含运费)满88元免邮费；不满88元，每单收取10元运费。（港澳台地区需满500元免邮费；不满500元，每单收取30元运费)
        </p>
        <br />
        <p class="tlt">• 使用什么快递发货?</p>
        <p>默认使用顺丰快递发货(个别商品使用其他快递）</p>
        <p>配送范围覆盖全国大部分地区(港澳台地区除外）</p>
        <br />
        <p>• 如何申请退货?</p>
        <p>
          1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账；
        </p>
        <p>2.内裤和食品等特殊商品无质量问题不支持退货；</p>
        <p>
          3.退货流程：
          确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成；
        </p>
        <p>
          4.因小兔鲜儿产生的退货，如质量问题，退货邮费由小兔鲜儿承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。
        </p>
      </div>
    </div>
    <!-- 商品推荐 -->
    <div class="goods_aside">
      <div class="goods_hot">
        <h3>24小时热销榜</h3>
        <router-link
          class="goods_item"
          v-for="item in dailySalesData"
          :key="item.id"
          :to="'/product/' + item.id"
        >
          <img v-lazyload="item.picture" alt="" />
          <p class="name">{{ item.name }}</p>
          <p class="desc">{{ item.desc }}</p>
          <p class="price">￥{{ item.price }}</p>
        </router-link>
      </div>
      <div class="goods_hot">
        <h3>周热销榜</h3>
        <router-link
          class="goods_item"
          v-for="item in weekSalesData"
          :key="item.id"
          :to="'/product/' + item.id"
        >
          <img v-lazyload="item.picture" alt="" />
          <p class="name">{{ item.name }}</p>
          <p class="desc">{{ item.desc }}</p>
          <p class="price">￥{{ item.price }}</p>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import { getGoodsHot, getGoodsComment, getUserCommentsData } from "api/product";
import myPaginate from "../../communal/myPaginate.vue";
import { ref, reactive, toRefs, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
export default {
  props: {
    details: {
      type: Object,
      default: {},
    },
  },
  name: "GoodsFooter",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();
    /* 定义总数据存放地址 */
    const data = reactive({
      /* tab当前切换的id */
      tabCurrentIndex: 0,
      /* 商品评价的购买和好评 */
      evaluateData: [],
      /* 点击tab栏切换并请求数据 */
      tabChange: (i) => {
        data.tabCurrentIndex = i;
        evaluateData.evaluateCurrentIndex = -2;
        userComments.tag = "";
      },

      /* 24小时热销榜 */
      dailySalesData: [],
      /* 周热销榜 */
      weekSalesData: [],
    });
    /* 监听用户点击Tab栏切换 */
    watch(
      () => data.tabCurrentIndex,
      (n, o) => {
        if (n == 1) {
          getGoodsComment(route.params.id).then((res) => {
            data.evaluateData = res.result;
          });
          getUserCommentsData({
            id: route.params.id,
            page: userComments.page,
            pageSize: userComments.pageSize,
          }).then((res) => {
            userComments.userCommentsData = res.result.items;
            userComments.pages = res.result.pages;
          });
        }
      },
      { deep: true }
    );
    /* 大家都在说的评价 */
    const evaluateData = reactive({
      evaluateCurrentIndex: -2,
      evaluateTag: (i, name) => {
        //  userComments.userCommentsData=[]
        evaluateData.evaluateCurrentIndex = i;
        userComments.tag = name;
        userComments.page = 1;
      },
    });
    const allTag = () => {
      getUserCommentsData({
        /* 当前商品的ID */
        id: route.params.id,
        /* 当前页码 */
        page: userComments.page,
        /* 查询几条 */
        pageSize: userComments.pageSize,
      }).then((res) => {
        userComments.userCommentsData = res.result.items;
        userComments.pages = res.result.pages;
      });
    };
    const hasPicture = () => {
      getUserCommentsData({
        /* 当前商品的ID */
        id: route.params.id,
        /* 当前页码 */
        page: userComments.page,
        /* 查询几条 */
        pageSize: userComments.pageSize,
        hasPicture: true,
      }).then((res) => {
        userComments.userCommentsData = res.result.items;
        userComments.pages = res.result.pages;
      });
    };
    /* 监听用户点击大家都在说，如果有变化在发送请求，类似于节流 */
    watch(
      () => evaluateData.evaluateCurrentIndex,
      (n, o) => {
        tags(n);
      },
      { deep: true }
    );
    const tags = (n) => {
      if (!userComments.tag) {
        if (n == -2) {
          allTag();
        } else if (n == -1) {
          hasPicture();
        }
      } else {
        tag();
      }
    };
    const tag = () => {
      getUserCommentsData({
        /* 当前商品的ID */
        id: route.params.id,
        /* 当前页码 */
        page: userComments.page,
        /* 查询几条 */
        pageSize: userComments.pageSize,
        tag: userComments.tag,
      }).then((res) => {
        userComments.userCommentsData = res.result.items;
        userComments.pages = res.result.pages;
        userComments.total = res.result.counts;
      });
    };
    /* 排序 */
    const sort = reactive({
      sortCurrentIndex: 0,
      srotData: ["默认", "最新", "最热"],
      sortHandle: (i) => {
        sort.sortCurrentIndex = i;
      },
    });
    /* 用户评价分页 */
    const userComments = reactive({
      /* 用户单击的图片的大图片 */
      bigImage: null,
      bigImageIndex: -1,
      /* 用户点击的当前页 */
      page: 1,
      /* 数据 */
      userCommentsData: [],
      /* 总页数 */
      pages: 0,
      /* 总条数 */
      total: 0,
      /* 每页显示几条 */
      pageSize: 10,
      /* 关键字 */
      tag: "",
      /* 用户点击分页 */
      currentPageChange: () => {
        if (!userComments.tag) {
          if (evaluateData.evaluateCurrentIndex == -2) {
            allTag();
          } else if (evaluateData.evaluateCurrentIndex == -1) {
            hasPicture();
          }
        } else {
          tag();
        }
      },
      /* 用户点击小图片 */
      bigImageChange: (img, index) => {
        userComments.bigImageIndex = index;
        userComments.bigImage = img;
        // console.log(img,index);
      },
    });
    watch(
      () => route.params.id,
      (n, o) => {
        /* 24小时热销榜 */
        getGoodsHot({ id: n, limit: 3, type: 1 }).then((res) => {
          data.dailySalesData = res.result;
        });
        /* 周热销榜 */
        getGoodsHot({ id: n, limit: 3, type: 2 }).then((res) => {
          data.weekSalesData = res.result;
        });
      },
      { immediate: true }
    );

    return {
      ...toRefs(data),
      ...toRefs(evaluateData),
      ...toRefs(sort),
      ...toRefs(userComments),
    };
  },
  components: {
    /* 分页组件 */
    myPaginate,
  },
};
</script>
<style lang="scss" scoped>
/* 如果不想样式污染  就加个scoped */
.GoodsFooter {
  margin-top: 20px;
  display: flex;

  /* 右侧 */
  .goods_article {
    width: 940px;
    margin-right: 20px;

    /* tab栏切换 */
    .goods_tabs {
      background-color: #fff;
      nav {
        height: 70px;
        line-height: 70px;
        display: flex;
        border-bottom: 1px solid #f5f5f5;
        div {
          padding: 0 40px;
          font-size: 18px;
          position: relative;
          cursor: pointer;
          &:nth-child(1) {
            border-right: 1px solid #f5f5f5;
          }
          /* tab高亮 */
          &.active::before {
            content: "";
            position: absolute;
            left: 40px;
            bottom: -1px;
            width: 72px;
            height: 2px;
            background-color: var(--color);
          }
          /* 右侧的红色字体 */
          span {
            display: inline-block;
            padding-left: 10px;
            color: var(--price);
          }
        }
      }
      /* 商品详情 */
      .goods_detail {
        padding: 40px;
        font-size: 0;
        /* 商品规格 */
        .attrs {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 30px;
          li {
            width: 50%;
            display: flex;
            color: #999;
            margin-bottom: 10px;
            font-size: 14px;
            .dl {
              width: 100px;
            }
            .dd {
              color: #666;
              flex: 1;
            }
          }
        }
        /* 图片 */
        img {
          width: 100%;
        }
      }
      .goods_comment {
        background-color: #fff;
        /* 头部 */
        .head {
          display: flex;
          padding: 30px 0;
          /* 左侧购买的好评 */
          .data {
            width: 340px;
            display: flex;
            padding: 20px;
            border-right: 1px solid #f5f5f5;
            p {
              flex: 1;
              text-align: center;
              span {
                display: block;
                width: 100%;
              }
              span:nth-child(2) {
                color: #999;
                font-size: 14px;
              }
              span:nth-child(1) {
                color: var(--price);
                font-size: 30px;
              }
            }
          }
          /* 右侧大家都在说 */
          .tags {
            flex: 1;
            display: flex;
            .dl {
              font-weight: 700;
              width: 100px;
              text-align: right;
              line-height: 42px;
              font-size: 14px;
            }
            .dd {
              display: flex;
              flex: 1;
              flex-wrap: wrap;
              p {
                cursor: pointer;
                width: 132px;
                height: 42px px;
                margin-left: 20px;
                margin-bottom: 20px;
                border-radius: 4px;
                border: 1px solid #e4e4e4;
                background: #f5f5f5;
                color: #999;
                text-align: center;
                line-height: 40px;
                font-size: 14px;
                &.active {
                  background-color: var(--color);
                  color: #fff;
                }
              }
            }
          }
        }
        /* 排序 */
        .sort {
          height: 60px;
          line-height: 60px;
          border-top: 1px solid #f5f5f5;
          border-bottom: 1px solid #f5f5f5;
          margin: 0 20px;
          color: #666;
          display: flex;
          align-items: center;
          font-size: 14px;
          span {
            margin-left: 20px;
          }
          p {
            cursor: pointer;
            margin-left: 30px;
            &.active {
              color: var(--color);
            }
          }
        }
        /* 用户评价 */
        .list {
          padding: 0 20px;
          .item {
            display: flex;
            padding: 25px 10px;
            border-bottom: 1px solid #f5f5f5;
            font-size: 14px;
            .user {
              width: 160px;
              img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                vertical-align: middle;
                overflow: hidden;
              }
              span {
                padding-left: 10px;
                color: #666;
              }
            }
            .body {
              flex: 1;
              .score {
                line-height: 40px;
                .iconfont {
                  color: #ff9240;
                  padding-right: 3px;
                }
                .attr {
                  padding-left: 10px;
                  color: #666;
                  small {
                    font-size: 14px;
                  }
                }
              }
              /* 评论内容 */
              .text {
                color: #666;
                line-height: 24px;
              }
              /* 用户发的照片 */
              .goods_comment_image {
                width: 100%;
                img {
                  width: 118px;
                  height: 118px;
                  object-fit: cover;
                  padding: 10px;
                  cursor: pointer;
                }
              }
              /* 用户点击小图时显示大图 */
              .bigImage {
                position: relative;
                width: 400px;
                height: 400px;
                img {
                  object-fit: cover;
                }
                i {
                  cursor: pointer;
                  position: absolute;
                  top: 0;
                  right: 0;
                  font-size: 40px;
                  background-color: #eee;
                  opacity: 0.5;
                }
              }
              /* 用户发送的时间 */
              .time {
                color: #999;
                display: flex;
                justify-content: space-between;
                margin-top: 5px;
                i {
                  font-size: 14px;
                  color: #999;
                }
              }
            }
          }
        }
      }
    }
    /* 注意事项 */
    .goods_warn {
      margin-top: 20px;
      background-color: #fff;
      h3 {
        height: 70px;
        line-height: 70px;
        border-bottom: 1px solid #f5f5f5;
        padding-left: 50px;
        font-size: 18px;
        font-weight: 400;
        margin-bottom: 10px;
      }
      p {
        line-height: 40px;
        padding: 0 25px;
        color: #666;
        font-size: 14px;
        &.tlt {
          color: #333;
        }
      }
    }
  }
  /* 左侧 */
  .goods_aside {
    width: 280px;
    min-height: 1000px;
    .goods_hot {
      h3 {
        height: 70px;
        background: #e26237;
        color: #fff;
        font-size: 18px;
        line-height: 70px;
        padding-left: 25px;
        margin-bottom: 10px;
        font-weight: 400;
      }
      .goods_item {
        width: 100%;
        background-color: #fff;
        margin-bottom: 10px;
        display: block;
        padding: 20px 30px;
        text-align: center;
        color: #000;
        img {
          width: 200px;
          height: 200px;
        }
        p {
          display: -webkit-box;
          overflow: hidden;
          white-space: normal !important;
          text-overflow: ellipsis;
          word-wrap: break-word;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          margin: 0 10px;
          padding-top: 10px;
 
          &.desc {
            font-size: 14px;
            color: #999;
          }
          &.price {
            color: var(--price);
            font-size: 20px;
          }
        }
      }
    }
  }
}
</style>